// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@use "../_globals" as *;

.code {
  border: 1px solid transparent;
  margin: 24px;
  user-select: none;
  overflow: hidden;
  border-radius: 6px;
  transition: border-color linear 75ms;

  &[data-copy-state="copied"] {
    .code-header {
      .code-actions {
        .code-action {
          &.code-action--copy {
            width: 13px;
            height: 16px;
            margin-top: 1px;
            opacity: 1;

            @include mask-image-internal("common/code/header-action-copied.svg");
          }
        }
      }
    }
  }

  &[data-has-request="false"] {
    .code-header {
      .code-actions {
        .code-action {
          &.code-action--copy {
            display: none;
          }
        }
      }
    }
  }

  &:hover {
    border-color: var(--color-code-border-hover);

    .code-header {
      background-color: var(--color-code-header-hover);
    }
  }

  .code-header,
  .code-section .code-metas,
  .code-section .code-content {
    padding: 0 14px;
  }

  .code-data {
    display: none;
  }

  .code-header {
    background-color: var(--color-code-header-default);
    height: 40px;
    display: flex;
    transition: background-color linear 75ms;

    .code-language,
    .code-actions {
      display: flex;
      align-items: center;
    }

    .code-language {
      color: var(--color-code-language-text);
      flex: 1;

      @include font-size(12.5px);
    }

    .code-actions {
      flex: 0 0 auto;
      padding-left: 8px;

      .code-action {
        margin-right: 15px;
        opacity: .65;
        cursor: pointer;
        transition: opacity linear 100ms;

        @include mask-image-fill;

        &:last-of-type {
          margin-right: 0;
        }

        &:hover {
          opacity: .85;
        }

        &:active {
          opacity: 1;
        }

        &.code-action--copy {
          background-color: var(--color-code-action-background);
          width: 13px;
          height: 15px;

          @include mask-image-internal("common/code/header-action-copy.svg");
        }
      }
    }
  }

  .code-section {
    .code-metas {
      background-color: var(--color-code-metas-background);
      line-height: 16px;
      height: 33px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .code-meta-name,
      .code-meta-picker,
      .code-meta-type {
        margin-top: -1px;
      }

      .code-meta-name,
      .code-meta-type {
        letter-spacing: .1px;
        min-width: 80px;
        flex: 0 0 auto;

        @include font-size(12.5px);
      }

      .code-meta-name,
      .code-meta-picker {
        border-right: 1px solid var(--color-code-meta-name-border);
      }

      .code-meta-name {
        color: var(--color-code-meta-name-text);
        text-align: left;
        padding-right: 8px;
        margin-right: 10px;
      }

      .code-meta-picker {
        flex: 1;
        padding-right: 10px;
        margin-right: 8px;
      }

      .code-meta-type {
        color: var(--color-code-meta-type-text);
        text-align: right;
      }
    }

    .code-content {
      background-color: var(--color-code-content-background);
      color: var(--color-code-content-text);
      line-height: 16px;
      white-space: pre;
      user-select: none;
      overflow: auto;
      max-height: 640px;
      padding-top: 10px;
      padding-bottom: 12px;

      @include font-size(11px);

      code {
        color: var(--color-white);
        user-select: text;
      }
    }

    @include selection {
      background-color: var(--color-code-selection);
    }
  }

  select {
    $select-padding-sides: 8px;

    background: transparent;
    color: var(--color-code-select-text-default);
    border: 1px solid var(--color-code-select-border-default);
    background-repeat: no-repeat;
    background-position-x: calc(100% - 8px);
    background-position-y: 50%;
    line-height: 23px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    padding-left: $select-padding-sides;
    padding-right: ($select-padding-sides + 8px);
    outline: none;
    cursor: pointer;
    border-radius: 3px;
    transition: all linear 75ms;
    transition-property: color, border-color;

    @include background-image-internal("common/code/select-arrow.svg");
    @include font-size(13px);
    @include appearance(none);

    &:hover {
      color: var(--color-code-select-text-hover);
      border-color: var(--color-code-select-border-hover);

      option {
        color: initial;
      }
    }

    option {
      color: initial;
    }
  }
}