@import 'scss/variables';

.smallModal {
  @extend %tabText;

  display: flex;
  flex-flow: column;
  gap: 15px;
  padding: 15px;
  width: 320px;

  @include themed {
    background: t($modal-secondaryColour);
  }

  .resetFooter {
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    gap: 20px;

    button {
      gap: 20px;
      display: flex;
      flex-flow: row;
    }
  }

  .textButton {
    @include basicIconButton(11px, 1.3rem, modal-text);

    border: none !important;
  }

  .tooltipTitle {
    @include themed {
      background: t($modal-sidebar);
      box-shadow: 0 0 0 1px t($modal-sidebarActive);
      color: t($color);
    }
  }

  .shareButtons {
    justify-content: space-between;
    display: flex;
    gap: 15px;
  }

  button {
    place-items: center;
    display: grid;

    @include basicIconButton(11px, 1.3rem, modal);
  }

  .copy {
    display: flex;
    flex-flow: row;
    gap: 15px;

    input[type='text'] {
      @include themed {
        background: t($modal-sidebar);
        border-radius: t($borderRadius);
        box-shadow: 0 0 0 1px t($modal-sidebarActive);
        padding: 11px;
        flex: 1;
        color: t($color);
      }

      border: none;
      outline: none;
    }
  }

  input[type='text'] {
    @include themed {
      background: t($modal-sidebar);
      border-radius: t($borderRadius);
      box-shadow: 0 0 0 1px t($modal-sidebarActive);
      padding: 11px;
      flex: 1;
      color: t($color);
    }

    border: none;
    outline: none;
  }

}

.shareHeader {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  .close {
    padding: 15px;
    place-items: center;
    display: grid;
    cursor: pointer;
    transition: 0.3s;
    @include themed {
      border-radius: t($borderRadius);
    }

    &:hover {
      @include themed {
        background: t($modal-sidebarActive);
      }
    }
  }
}