MetaPhase-Consulting/State-TalentMAP

.legs-form-container {
  display: grid;
  .legs-form {
    background-color: $color-white;
    border: 2px solid $color-gray-light;
    padding: 0 10px 20px 10px;
    overflow-x: auto;
    display: grid;
    grid-template-columns: 90px repeat(16, auto);
    align-items: center;

    // generic col styling
    // $col-count = 2(Label col and EF col) + leg limit
    $col-count: 12;
    @for $num from 1 through $col-count {
      .grid-col-#{$num}  {
        grid-column: $num;
        @if $num == 1 {
          font-weight: bold;
        }
        @if $num != 1 {
          border-left: 1px solid $color-gray-lighter;
          min-width: 150px;
        }
      }
    }

    // generic row styling
    // $row-count should be max num in [am, md, lrg]-config-aim-legs-form-edit 3 variables
    $row-count: 14;
    @for $num from 1 through $row-count {
      .grid-row-#{$num} {
        grid-row: $num;
        padding: 10px;
      }
    }

    // config styling
    @each $row-num in map-values($sm-height-config-aim-legs-form-edit) {
      .grid-row-#{$row-num} {
        min-height: 60px;
      }
    }
    @each $row-num in map-values($md-height-config-aim-legs-form-edit) {
      .grid-row-#{$row-num} {
        min-height: 85px;
      }
      .grid-col-1.grid-row-#{$row-num} {
        padding-top: 30px;
      }
    }
    @each $row-num in map-values($lg-height-config-aim-legs-form-edit) {
      .grid-row-#{$row-num} {
        min-height: 160px;
      }
      .grid-col-1.grid-row-#{$row-num} {
        padding-top: 60px;
      }
    }

    .grid-row-hover {
      background-color: $color-gray-lightest;
    }

    .remove-leg-button {
      float: right;
    }
    .remove-leg-button:hover {
      color: red;
    }

    .month-year-dropdown-wrapper {
      display: flex;
    }

    .leg-dropdown {
      background-image: none;
      border: 2px solid transparent;
      border-bottom: 2px solid $color-black;
      cursor: pointer;
      font-size: 16px;
      max-width: none;
      padding: 2px 10px 2px 2px;
      height: auto;
    }
    .leg-dropdown:hover {
      border: 2px solid $blue-primary;
    }

    .other-tod-wrapper {
      min-height: 65px;
      display: flex;
      cursor: default;
      .other-tod {
        align-self: flex-start;
        padding-top: 23px;
        .other-tod-icon {
          cursor: pointer;
          vertical-align: top;
          color: $secondary-dark;
        }
      }
    }
  }
  .fa {
    padding-left: 5px;
  }
}

.swal-aim-ted-calendar {
  padding: 0px;
  width: 600px;

  .ted-modal-content-container {
    border-top: 1px solid $color-blue-mariner;
    margin-top: -20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    .ted-react-calendar {
      width: 280px;
      margin-top: 30px;

      .react-calendar__navigation {
        background-color: $bg-gray-medium-3;
        margin-bottom: 0;

        button {
          font-size: 2rem;
          font-weight: bold;
        }

        .react-calendar__navigation__label {
          font-size: 1.5rem;
          font-weight: bold;
          min-width: 40px;
        }
      }

      .react-calendar__month-view__weekdays {
        background-color: $bg-gray-medium-3;
        font-size: .8em;
      }
    }


    .ted-buttons {
      display: flex;
      justify-content: flex-end;
      flex-basis: 66%;
      margin-right: 70px;
    }
  }

}

.swal-aim-custom-tod {
  padding: 0px;
  width: 600px;
  .tod-modal-container {
    border-top: 1px solid $color-blue-mariner;

    .tod-modal-wrapper {
      display: flex;
      padding-top: 25px;
      justify-content: space-evenly;
    }

    .tod-input-and-button {
      display: flex;
      flex-direction: row;
      align-items: baseline;

      label {
        padding-right: 5px;
      }
    }

    .tod-buttons {
      margin: 10px;
    }

    .tod-add-clickable {
      font-size: 20px;
      .tod-icon {
        color: $color-blue-hover;
      }

      .tod-unclickable, .tod-unclickable:hover {
        color: $color-gray;
        cursor: not-allowed;
      }
    }

    .tod-preview {
      margin: 35px;
      > span {
        display: block;
        text-align: left;
      }
      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $color-gray-lightest;
        width: 100%;
        height: 55px;
      }
      > button {
        float: right;
      }
    }
    .fa {
      color: $alert-red;
    }
    .hide-clear {
      visibility: hidden;
    }
  }

}

.aim-form-arrow-edit {
  color: $bg-gray-dark-2;
  font-size: small;
  margin-inline: 40%;
}