@use './colors';

@mixin all {
  .seam-access-code-form {
    @include main;
    @include schedule-picker;
    @include time-zone-picker;
  }
}

@mixin main {
  > .seam-main {
    padding: 24px 24px 0;

    .seam-code-text-field {
      margin-bottom: 4px;
    }

    .seam-code-field {
      > .seam-text-field {
        margin-bottom: 8px;
      }

      > .seam-bottom {
        align-items: center;
        justify-content: flex-end;
        display: flex;

        &.has-hints {
          justify-content: space-between;
        }

        .seam-requirements {
          color: colors.$text-gray-2;
          font-size: 14px;
          line-height: 134%;
          list-style: disc;
          padding-left: 20px;

          &.seam-error {
            color: colors.$status-red;
          }
        }
      }
    }

    .seam-selected-times {
      margin-top: 4px;
      margin-left: 36px;
      display: flex;
      align-items: center;
      gap: 24px;

      > div {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-column-gap: 16px;

        > span {
          font-size: 14px;
          line-height: 134%;
        }

        > .seam-label {
          color: colors.$text-gray-2;
        }

        > .seam-time {
          color: colors.$text-gray-1;
        }
      }
    }

    .seam-unknown-error {
      text-align: center;
      margin-bottom: 16px;
      line-height: 134%;
      color: colors.$status-red;
    }

    .seam-actions {
      display: flex;
      gap: 8px;
      justify-content: center;

      .seam-btn {
        width: 96px;
      }
    }
  }
}

@mixin schedule-picker {
  .seam-schedule-picker {
    .seam-content {
      padding: 0 24px;

      .seam-time-zone {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 24px;

        .seam-label {
          color: colors.$text-gray-2;
          margin-right: 4px;
        }

        .seam-selected {
          color: colors.$primary;
          cursor: pointer;
          display: flex;
          align-items: center;

          svg {
            scale: 0.6667;
            transform: translate(-6px, 2px);

            * {
              fill: colors.$primary;
            }
          }
        }
      }
    }
  }
}

@mixin time-zone-picker {
  .seam-access-code-time-zone-picker {
    .seam-content {
      padding: 0 24px;
    }
  }
}