@use 'sass:math';

@use '../../../../styles/_globals.scss' as *;
@use '../../../../styles/components/number-badge' as badge;

:host {
  display: inline-flex;
  align-items: center;
  height: var(--header-button-size);
}

.wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.main-btn {
  position: relative;
  margin-left: 0;
  // needs to be above the rest
  z-index: 2;
  box-sizing: border-box;

  &.isTimeUp {
    box-shadow: inset 0 0 0 2px var(--c-primary);
  }

  .mat-icon {
    @include center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 24px;
    height: 24px;
    z-index: 2;

    :host(.isSuccess) & {
      opacity: 0.25;
    }
  }

  .habit-initial {
    @include center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
    background-color: var(--c-light-10);
    z-index: 2;

    @include darkTheme() {
      background-color: rgba(255, 255, 255, 0.15);
    }

    @include lightTheme() {
      background-color: var(--c-dark-10);
    }

    :host(.isSuccess) & {
      opacity: 0.25;
    }
  }

  .check-ico {
    //color: var(--c-primary);
    opacity: 1 !important;
    @include center;
    font-size: 32px;
    width: 32px;
    height: 32px;
    //font-weight: bold;
    z-index: 3;
  }
}

.extra-label,
.label {
  @include badge.number-badge;

  .wrapper:hover .stopwatch & {
    opacity: 0;
  }
}

.extra-label {
  bottom: auto;
  top: -4px;
}

.controls {
  transition: var(--transition-standard);
  position: absolute;
  top: 100%;
  display: flex;
  flex-direction: column;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;

  // add a little bit of extra hover area
  &:after {
    content: '';
    position: absolute;
    top: calc(-1.25 * var(--s));
    left: calc(-1.25 * var(--s));
    right: calc(-1.25 * var(--s));
    bottom: calc(-1.25 * var(--s));
  }
}

.wrapper:hover .controls {
  pointer-events: all;

  .btn {
    transform: translateY(0);
    opacity: 1;
  }
}

.btn {
  transition: var(--transition-standard);
  transform: translateY(-100%);
  opacity: 0;
  position: relative;
  z-index: 2;
  margin-top: var(--s-half);
  margin-left: 0;

  &:nth-child(2) {
    transform: translateY(-200%);
  }
}
