@import "colors";
@import "constants";

.type-de-champ {
  width: 100%;
  background-color: #FAFDFF;
  border: 1px solid $border-grey;
  border-radius: 5px;
  margin-bottom: $default-padding * 2;
  box-shadow: 0px 2px 4px -4px;
  overflow: hidden;

  .handle.icon {
    width: 32px;
    height: 32px;
    background-size: 32px;
    margin-left: 7px;
    margin-right: 16px;
    align-self: center;
    cursor: grab;
    opacity: 0.8;

    &:hover {
      opacity: 0.4;
    }
  }

  .move {
    height: 44px;
    border-radius: 25px;
    margin-right: 10px;

    &:first-of-type {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: -1px;
    }

    &:last-of-type {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  .head {
    background-color: #D9ECFF;

    select {
      margin-bottom: 0px;
    }
  }

  &.type-header-section {
    &,
    .head {
      background-color: $blue-france-500;
    }

    .head .icon {
      filter: contrast(0%) brightness(200%);
      opacity: 0.9;
    }

    label {
      color: $light-grey;
    }
  }

  .flex {
    &.section {
      padding: 10px 10px 0 10px;
      margin-bottom: 8px;
    }

    &.hr {
      border-bottom: 1px solid $border-grey;

      &.head {
        border-bottom: 1px solid #D4E5F5;
        padding-bottom: 10px;
      }
    }

    &.shift-left {
      margin-left: 55px;
    }

    &.delete {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }
  }

  .cell {
    margin-right: 20px;

    &.small {
      width: 90px;
    }

    &.libelle {
      width: 300px;
    }

    label {
      margin-bottom: 8px;
      text-transform: uppercase;
      font-size: 12px;
    }
  }

  .carte-options {
    label {
      font-weight: initial;
    }
  }

  .inline {
    display: inline;
  }
}

.champs-editor {
  .footer {
    height: 50px;
  }

  .buttons {
    display: flex;
    justify-content: space-between;
    margin-left: -30px;
    position: fixed;
    bottom: 0px;
    background-color: $white;
    max-width: 1100px;
    width: 100%;
    border: 1px solid $border-grey;
    padding: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: none;
    padding-bottom: 15px;
    padding-top: 15px;
  }
}