---

@use '../../theme/mixins' as m;

.tooltip {
  @include m.tooltipHint;
}

.footer {
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template: 1fr / 1fr auto;
  column-gap: var(--space-0500);

  .intervals {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--space-0500);
    overflow: auto;
  }

  .interval {
    @include m.buttonBase;
  }

  .time {
    text-align: right;
    font-size: var(--space-0750);
    font-weight: var(--font-medium);
    color: var(--neutral-12);
  }
}



[data-theme='mxt'],
[data-theme='mb'][data-mode='light'] {
  --btn-bg-hover: var(--neutral-4);
  --btn-text-hover: var(--neutral-13);

  --btn-bg-pressed: var(--neutral-5);
  --btn-text-pressed: var(--neutral-13);

  --btn-bg-selected: var(--neutral-12);
  --btn-text-selected: var(--neutral-2);

  --btn-svg-color: var(--neutral-2);

  --tooltip-bg: var(--neutral-13);
  --tooltip-text: var(--neutral-1);
}

[data-theme='tr'],
[data-theme='mb'][data-mode='dark'] {
  --btn-bg-hover: var(--neutral-4);
  --btn-text-hover: var(--neutral-13);

  --btn-bg-pressed: var(--neutral-5);
  --btn-text-pressed: var(--neutral-13);

  --btn-bg-selected: var(--neutral-5);
  --btn-text-selected: var(--neutral-13);

  --btn-svg-color: var(--neutral-12);

  --tooltip-bg: var(--neutral-6);
  --tooltip-text: var(--neutral-13);
}

@mixin buttonBase {
  min-width: var(--space-2000);
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--space-0250);
  color: var(--neutral-12);
  padding: var(--space-0500);
  border-radius: var(--space-0250);
  font-size: var(--space-0750);
  cursor: pointer;

  p {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: var(--space-0750);
    gap: var(--space-0500);
    padding: 0;

    svg {
      width: var(--space-1000);
      height: var(--space-1000);
    }
  }

  &:hover:not(:disabled):not(.selected):not(.pressed),
  &:active:not(:disabled):not(.selected):not(.pressed) {
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
  }

  &.pressed {
    background-color: var(--btn-bg-pressed);
    color: var(--btn-text-pressed);
  }

  &.selected {
    background-color: var(--btn-bg-selected);
    color: var(--btn-text-selected);
  }

  &:disabled {
    background-color: transparent;
    color: var(--neutral-9);
    cursor: not-allowed;
  }
}

@mixin tooltipHint {
  background-color: var(--tooltip-bg) !important;
  color: var(--tooltip-text) !important;
  font-size: var(--space-0750);

  div {
    border-right-color: var(--tooltip-bg) !important;
  }
}