Dwinzo_dev/app/src/styles/components/tools.scss

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

.tools-container {
  @include flex-center;
  position: fixed;
  bottom: 32px;
  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-tools};
  .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;
    }
  }
}

@keyframes expandWidth {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: fit-content;
    opacity: 1;
  }
}