@use '../../themes/utils';

.mat-time-period {
  display: flex;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25rem;
  box-sizing: border-box;

  @include utils.create-token-slot(
    border-color,
    time-period-border-color,
    utils.create-system-var(outline)
  );
}

.mat-time-period-vertical {
  flex-direction: column;
  width: 3.25rem;
  height: 4.5rem;

  .mat-time-period-item {
    &:first-child {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    &:last-child {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }
}

.mat-time-period-horizontal {
  flex-direction: row;
  max-width: 13.5rem;
  width: 100%;
  height: 2.5rem;

  .mat-time-period-item {
    &:first-child {
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;
    }

    &:last-child {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }
}

.mat-time-period-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.mat-time-period-item-active {
  @include utils.create-token-slot(
    color,
    time-period-active-text-color,
    utils.create-system-var(on-tertiary-container)
  );
  @include utils.create-token-slot(
    background-color,
    time-period-active-background-color,
    utils.create-system-var(tertiary-container)
  );
}

.mat-time-period-item-disabled {
  pointer-events: none;

  @include utils.create-token-slot(
    color,
    time-period-disabled-text-color,
    utils.create-system-var(on-surface-variant)
  );
  @include utils.create-token-slot(
    background-color,
    time-period-disabled-background-color,
    color-mix(in srgb, utils.create-system-var(on-surface) 20%, transparent)
  );
}
