@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/radius';
@use '@mezzanine-ui/system/effect';
@use '@mezzanine-ui/system/spacing';
@use '../text-field';
@use '../button';
@use '../button/utils' as btn-utils;
@use './time-panel' as *;

.#{$prefix} {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  border-radius: radius.variable(roomy);
  box-shadow: effect.variable(shadow, inner-top-and-bottom);
  background-color: palette.semantic-variable("background", base);

  * {
    box-sizing: border-box;
  }
}

.#{$columns-prefix} {
  display: flex;
}

.#{$action-prefix} {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, comfort);
  border-top: 1px solid palette.semantic-variable(separator, neutral-faint);
}

.#{$button-prefix} {
  @include btn-utils.reset();

  transition: transition.standard(background-color) transition.standard(color);

  @include typography.inherit;

  &:hover:not(.#{$button-prefix}--active) {
    background-color: palette.semantic-variable("background", neutral-subtle);
  }

  &:focus-visible:not(.#{$button-prefix}--active) {
    background-color: palette.semantic-variable("background", neutral-subtle);
    box-shadow: effect.variable(focus, primary);
  }

  &--active {
    color: palette.semantic-variable(text, fixed-light);
    background-color: palette.semantic-variable("background", brand);

    &:focus-visible {
      box-shadow: effect.variable(focus, primary);
    }
  }
}

.#{$column-prefix} {
  $cell-height: #{spacing.semantic-variable(size, element, loose)};

  width: spacing.semantic-variable(size, element, extra);
  padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, micro);
  position: relative;

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: palette.semantic-variable(separator, neutral-faint);
  }

  &__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: $cell-height;
    border-radius: radius.variable(base);
  }

  &__placeholder {
    width: 100%;
    height: $cell-height;
  }
}