@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.tools-container {
  @include flex-center;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 8px;
  gap: 10px;
  box-shadow: #{$box-shadow-medium};
  border-radius: #{$border-radius-large};
  width: fit-content;
  transition: width 0.2s;
  background-color: var(--background-color);
  z-index: #{$z-index-default};
  .split {
    height: 20px;
    width: 2px;
    border-radius: 2px;
    background: var(--highlight-accent-color);
  }

  .draw-tools,
  .general-options,
  .activeDropicon {
    @include flex-center;
    gap: 8px;
    interpolate-size: allow-keywords;
    width: 0;
    opacity: 0;
    animation: expandWidth 0.2s ease-in-out forwards;

    .tool-button {
      @include flex-center;
      height: 28px;
      width: 28px;
      cursor: pointer;
      border-radius: #{$border-radius-small};

      &:hover {
        background: color-mix(in srgb,
            var(--highlight-accent-color) 60%,
            transparent);
      }
    }

    .active {
      background-color: var(--accent-color);

      &:hover {
        background-color: var(--accent-color);
      }
    }
  }

  .activeDropicon {
    gap: 2px;

    .drop-down-option-button {
      @include flex-center;
      height: 28px;
      cursor: pointer;
      border-radius: #{$border-radius-small};
      position: relative;

      &:hover {
        background: color-mix(in srgb,
            var(--highlight-accent-color) 60%,
            transparent);
      }

      .drop-down-container {
        position: absolute;
        bottom: 40px;
        left: 0;
        box-shadow: #{$box-shadow-medium};
        padding: 8px;
        border-radius: #{$border-radius-large};
        background: var(--background-color);

        .option-list {
          margin: 4px 0;
          display: flex;
          align-items: center;
          white-space: nowrap;
          border-radius: #{$border-radius-medium};
          gap: 6px;
          padding: 4px;

          &:hover {
            background-color: var(--highlight-accent-color);
            color: var(--accent-color);

            path {
              stroke: var(--accent-color);
            }
          }

          .active-option {
            height: 12px;
            width: 12px;
            @include flex-center;
          }

          .option {
            color: inherit;
          }
        }
      }
    }
  }

  .toggle-threed-button {
    @include flex-center;
    padding: 3px;
    border-radius: #{$border-radius-small};
    background-color: var(--highlight-accent-color);
    gap: 2px;
    position: relative;

    .toggle-option {
      font-size: var(--font-size-small);
      padding: 2px;
      z-index: 1;
      transition: all 0.2s;
    }

    &::after {
      content: "";
      position: absolute;
      background-color: var(--accent-color);
      left: 3px;
      top: 3px;
      height: 18px;
      width: 18px;
      border-radius: #{$border-radius-small};
      transition: all 0.2s;
    }

    .active {
      color: var(--highlight-accent-color);
    }
  }

  .toggled {
    &::after {
      left: 24px;
    }
  }





}

.exitPlay {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--accent-color);

  cursor: pointer;
  @include flex-center;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  transition: background-color 0.3s, transform 0.3s;
  color: var(--background-color);
  transform: none;

  &:hover {
    background-color: var(--accent-color);
    transform: scale(1.1);
  }
}



@keyframes expandWidth {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: fit-content;
    opacity: 1;
  }
}