// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.copy-button {
  @include buttonStyle;
  width: 100%;
  height: $s-32;
  border: $s-1 solid transparent;
  border-radius: $br-8;
  background-color: transparent;
  box-sizing: border-box;
  .icon-btn {
    @include flexCenter;
    height: $s-32;
    min-width: $s-28;
    width: $s-28;
    svg {
      @extend .button-icon-small;
      stroke: var(--icon-foreground);
    }
  }

  &:hover {
    background-color: var(--color-background-tertiary);
    color: var(--color-foreground-primary);
    border: $s-1 solid var(--color-background-tertiary);
    .icon-btn {
      svg {
        stroke: var(--button-tertiary-foreground-color-active);
      }
    }
  }
  &:focus,
  &:focus-visible {
    outline: none;
    border: $s-1 solid var(--button-tertiary-border-color-focus);
    background-color: transparent;
    color: var(--button-tertiary-foreground-color-focus);
    .icon-btn svg {
      stroke: var(--button-tertiary-foreground-color-active);
    }
  }
}

.copy-wrapper {
  @include buttonStyle;
  @include copyWrapperBase;
  width: 100%;
  height: fit-content;
  text-align: left;
  border: $s-1 solid transparent;
  .icon-btn {
    @include flexCenter;
    position: absolute;
    top: 0;
    right: 0;
    height: $s-32;
    width: $s-28;
    svg {
      @extend .button-icon-small;
      stroke: var(--button-tertiary-foreground-color-focus);
      display: none;
    }
  }
  &:hover {
    background-color: var(--button-tertiary-background-color-focus);
    color: var(--button-tertiary-foreground-color-focus);
    border: $s-1 solid var(--button-tertiary-background-color-focus);
    .icon-btn svg {
      display: flex;
    }
  }

  &:focus,
  &:focus-visible {
    outline: none;
    border: $s-1 solid var(--button-tertiary-border-color-focus);
    background-color: transparent;
    color: var(--button-tertiary-foreground-color-focus);
  }
}