@use '../../../../shared/styles/variables' as *;

.duration-picker {
  --height: 44px;
  --radius: 12px;
  --gap-open: 7px;
  --text: #{$duration-picker-text};
  --muted: #{$duration-picker-muted};
  @include desktop-down{
    --height: 36px;
    --gap-open: 6px;
  }

  width: fit-content;
  height: var(--height);

  display: flex;
  align-items: center;
  gap: 0;

  border-radius: var(--radius);
  overflow: visible;
  color: var(--text);
  cursor: pointer;
  user-select: none;

  transition:
    gap 320ms cubic-bezier(0.34, 1.42, 0.64, 1),
    opacity 180ms ease;

  &.is-disabled {
    cursor: default;
    opacity: 1;
  }
}

.duration-picker--open {
  gap: var(--gap-open);
  cursor: default;
}

.duration-picker__segment {
  position: relative;
  height: var(--height);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  border: 0;
  outline: 0;
  background: $color-bg;
  color: var(--text);
  font: inherit;

  transition:
    width 320ms cubic-bezier(0.34, 1.42, 0.64, 1),
    gap 320ms cubic-bezier(0.34, 1.42, 0.64, 1),
    padding 320ms cubic-bezier(0.34, 1.42, 0.64, 1),
    border-radius 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.duration-picker__segment--days,
.duration-picker__segment--hours {
  width: 44px;
  padding: 0 4px;
}

.duration-picker__segment--days {
  border-radius: var(--radius) 0 0 var(--radius);
  padding-left: 8px;
}

.duration-picker__segment--hours,
.duration-picker__segment--minutes {
  border-radius: 0;
}

.duration-picker__segment--minutes {
  width: 64px;
  padding: 0 3px;
  padding-right: 8px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.duration-picker--open .duration-picker__segment {
  border-radius: var(--radius);
  gap: 8px;
}

.duration-picker--open .duration-picker__segment--days,
.duration-picker--open .duration-picker__segment--hours,
.duration-picker--open .duration-picker__segment--minutes {
  width: 52px;
  padding: 0 12px;
}

.duration-picker--open .duration-picker__segment--minutes {
  width: 70px;
}

.duration-picker--open .duration-picker__segment--days:hover,
.duration-picker--open .duration-picker__segment--hours:hover,
.duration-picker--open .duration-picker__segment--minutes:hover {
  background: $duration-picker-hover-bg;
}

.duration-picker--open .duration-picker__segment--days:focus-within,
.duration-picker--open .duration-picker__segment--hours:focus-within,
.duration-picker--open .duration-picker__segment--minutes:focus-within {
  background: $color-surface;
  box-shadow: $shadow-duration-focus;
}

.duration-picker__input {
  width: 22px;
  padding: 0;
  border: 0;
  outline: 0;
  background: $transparent;

  color: var(--text);
  font: inherit;
  font-size: $font-size-16;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;

  pointer-events: none;

  transition:
    width 320ms cubic-bezier(0.34, 1.42, 0.64, 1),
    transform 320ms cubic-bezier(0.34, 1.42, 0.64, 1);

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  &:disabled {
    color: var(--text);
    opacity: 1;
    -webkit-text-fill-color: var(--text);
  }
}

.duration-picker--open .duration-picker__input {
  width: 28px;
  pointer-events: auto;
}

.duration-picker__unit {
  margin-left: 6px;
  color: var(--muted);
  font-size: $font-size-15;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;

  transition:
    margin-left 320ms cubic-bezier(0.34, 1.42, 0.64, 1),
    color 220ms ease;
}

.duration-picker--open .duration-picker__unit {
  margin-left: 7px;
}
