// 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";

@import "./common.scss";

.sidebar-tab-wrapper {
  padding: $s-12;
}

.token-pills-wrapper {
  display: flex;
  gap: $s-4;
  flex-wrap: wrap;
}

.token-pill {
  @extend .button-secondary;
  padding: $s-4 $s-8;
  border-radius: $br-6;
  font-size: $fs-14;

  &.token-pill-highlighted {
    color: var(--button-primary-foreground-color-rest);
    background: var(--button-primary-background-color-rest);
  }

  &.token-pill-invalid {
    background-color: var(--button-secondary-background-color-rest);
    color: var(--status-color-error-500);
    opacity: 0.8;
  }
}

.section-text-icon {
  font-size: $fs-12;
  width: 16px;
  height: 16px;
  display: flex;
  place-content: center;
}

.section-icon {
  margin-right: $s-4;
  // Align better with the label
  translate: 0px -1px;
}

.download-json-button {
  @extend .button-secondary;
  position: absolute;
  bottom: $s-12;
  right: $s-12;
  display: flex;
  align-items: center;
  padding: $s-6 $s-8;
  text-transform: uppercase;
  gap: $s-8;

  .download-icon {
    @extend .button-icon;
    stroke: var(--icon-foreground);
    width: 20px;
    height: 20px;
  }
}
