@import (reference) '../../styles/variables.less';
@import '../../styles/utils.less';

.@{prefix}-previewer {
  &-actions {
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: center;

    &:not(:last-child) {
      border-bottom: 1px dashed @c-border-light;

      @{dark-selector} & {
        border-bottom-color: @c-border-less-dark;
      }
    }
  }

  &-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;

    > svg {
      width: 16px;
      fill: darken(@c-border, 20%);
      transition: fill 0.2s;

      @{dark-selector} & {
        fill: lighten(@c-border-dark, 20%);
      }
    }

    &:hover > svg {
      fill: darken(@c-border, 30%);

      @{dark-selector} & {
        fill: lighten(@c-border-dark, 30%);
      }
    }

    &:not(:last-child) {
      margin-inline-end: 4px;
    }
  }

  &-action-sketch {
    > select {
      position: absolute;
      appearance: none;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    &[data-copied] > svg {
      fill: @c-success;
    }
  }

  &-tabs {
    position: relative;
    padding: 0 12px;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
      border-bottom: 1px dashed @c-border-light;

      @{dark-selector} & {
        border-bottom-color: @c-border-less-dark;
      }
    }
  }
}

.@{prefix}-tabs {
  overflow: hidden;

  &-top {
    flex-direction: column;

    .@{prefix}-tabs-ink-bar {
      bottom: 0;
    }
  }

  &-nav {
    display: flex;

    &-wrap {
      display: flex;
      white-space: nowrap;
      overflow: hidden;

      &&-ping-left {
        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 10%) inset;
      }

      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
        box-shadow: 0 0 5px rgba(0, 0, 0, 10%);
      }
    }

    &-list {
      position: relative;
      z-index: 1;
      display: flex;
      transition: transform 0.2s;
    }

    &-more {
      height: 100%;
      cursor: pointer;
      background: none;
      border: 0;
      transition: box-shadow 0.2s;
    }
  }

  &-tab {
    display: flex;
    margin: 0 12px;

    &-btn {
      padding: 0;
      color: @c-text-secondary;
      font-size: 14px;
      line-height: 36px;
      border: 0;
      outline: none;
      background: transparent;
      box-sizing: border-box;
      cursor: pointer;
      transition: all 0.2s;

      @{dark-selector} & {
        color: @c-text-secondary-dark;
      }

      &:hover {
        color: @c-text;

        @{dark-selector} & {
          color: @c-text-dark;
        }
      }
    }

    &-active &-btn {
      color: @c-text;

      @{dark-selector} & {
        color: @c-text-dark;
      }
    }
  }

  &-ink-bar {
    position: absolute;
    height: 1px;
    background: @c-primary;
    transition: left 0.2s, width 0.2s;
    pointer-events: none;

    @{dark-selector} & {
      background: @c-primary-dark;
    }
  }

  &-dropdown {
    position: absolute;
    background: inherit;
    border: 1px solid @c-border;
    max-height: 200px;
    overflow: auto;

    @{dark-selector} & {
      border-color: @c-border-dark;
    }

    > ul {
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        padding: 4px 12px;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          color: @c-primary;

          @{dark-selector} & {
            color: @c-primary-dark;
          }
        }

        &:not(:last-child) {
          border-bottom: 1px dashed @c-border;

          @{dark-selector} & {
            border-bottom-color: @c-border-dark;
          }
        }
      }
    }

    &-hidden {
      display: none;
    }
  }
}