import { css } from 'styled-components';

export const tag = css`
  /**
    * @tokens Tag borders
    */

  --tag-border-width: 1px; //@presenter Border
  --tag-border-style: solid; //@presenter Border
  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
  --tag-box-shadow: none; // @presenter Shadow

  --tag-status-dot-color-default: var(--color-persian-green-7);
  --tag-badge-size: var(--spacing-xs);
  --tag-badge-border-width: 1.5px;
  --tag-badge-border-color: #ffffff;


  /**
    * @tokens Tag spacing
    */

  --tag-padding-vertical: 1px; //@presenter Spacing
  --tag-padding-horizontal: 8px; //@presenter Spacing
  --tag-padding: 0 var(--tag-padding-horizontal); //@presenter Spacing
  --tag-content-padding: var(--tag-padding-vertical) 0; //@presenter Spacing
  --tag-content-gap: 4px; //@presenter Spacing

  --tag-large-padding-vertical: 4px; //@presenter Spacing
  --tag-large-padding-horizontal: 16px; //@presenter Spacing
  --tag-large-padding: 0 var(--tag-large-padding-horizontal); //@presenter Spacing
  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
  
  --tag-margin: 0 5px 0 0; //@presenter Spacing
  --tag-gap: 5px; //@presenter Spacing

  /**
    * @tokens Tag size
    */

  .tag-size-large {
    --tag-padding: var(--tag-large-padding);
    --tag-content-padding: var(--tag-large-content-padding);
    --tag-font-size: var(--font-size-base);
  }

  /**
    * @tokens Tag typography
    */

  --tag-font-size: var(--font-size-sm); // @presenter FontSize
  --tag-font-family: inherit; // @presenter FontFamily
  --tag-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --tag-line-height: var(--line-height-sm);
  --tag-text-transform: capitalize;

  /**
    * @tokens Tag icon
    */

  --tag-icon-width: 1em; // @presenter Spacing
  --tag-icon-height: 1em; // @presenter Spacing

  /**
    * @tokens Tag colors
    */
  --tag-basic-content-color: var(--color-warm-grey-9); // @presenter Color
  --tag-basic-bg-color: var(--color-warm-grey-2); // @presenter Color
  --tag-basic-border-color: var(--color-warm-grey-2); // @presenter Color

  .tag-grey,
  .tag-draft,
  .tag-schema,
  .tag-default {
    --tag-color: var(--text-color-primary); // @presenter Color
    --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
    --tag-border-color: var(--border-color-primary); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
  }

  .tag-green,
  .tag-success,
  .tag-approved {
    --tag-color: var(--color-success-active); // @presenter Color
    --tag-bg-color: var(--color-success-bg); // @presenter Color
    --tag-border-color: var(--color-success-active); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
  }

  .tag-red,
  .tag-error,
  .tag-declined {
    --tag-color: var(--color-error-active); // @presenter Color
    --tag-bg-color: var(--color-error-bg); // @presenter Color
    --tag-border-color: var(--color-error-active); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
  }

  .tag-gold,
  .tag-warning,
  .tag-deprecated {
    --tag-color: var(--color-warning-active); // @presenter Color
    --tag-bg-color: var(--color-warning-bg); // @presenter Color
    --tag-border-color: var(--color-warning-active); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
  }

  .tag-blue,
  .tag-processing {
    --tag-color: var(--color-info-active); // @presenter Color
    --tag-bg-color: var(--color-info-bg); // @presenter Color
    --tag-border-color: var(--color-info-active); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
  }

  .tag-purple,
  .tag-head {
    --tag-color: var(--color-purple-7); // @presenter Color
    --tag-bg-color: var(--color-purple-1); // @presenter Color
    --tag-border-color: var(--color-purple-7); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
  }

  .tag-cyan,
  .tag-option,
  .tag-geekblue,
  .tag-link {
    --tag-color: var(--color-turquoise-7); // @presenter Color
    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
    --tag-border-color: var(--color-turquoise-7); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
  }

  .tag-yellow {
    --tag-color: var(--color-carrot-7); // @presenter Color
    --tag-bg-color: var(--color-carrot-1); // @presenter Color
    --tag-border-color: var(--color-carrot-7); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
  }

  .tag-magenta,
  .tag-hook {
    --tag-color: var(--color-magenta-7); // @presenter Color
    --tag-bg-color: var(--color-magenta-1); // @presenter Color
    --tag-border-color: var(--color-magenta-7); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
  }

  .tag-lime {
    --tag-color: var(--color-green-7); // @presenter Color
    --tag-bg-color: none; // @presenter Color
    --tag-border-color: var(--color-green-7); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
  }

  .tag-product {
    --tag-color: var(--color-warm-grey-7); // @presenter Color
    --tag-bg-color: transparent; // @presenter Color
    --tag-border-color: var(--color-warm-grey-4); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
  }

  /**
    * @tokens Tag http
    */
  .tag-http {
    --tag-font-family: var(--font-family-monospaced); // @presenter FontFamily
    --tag-text-transform: uppercase;
  }

  /**
    * @tokens Operation tag colors
    */

  --tag-operation-color-delete: #e70b46; // @presenter Color
  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
  
  --tag-operation-color-get: #25b869; // @presenter Color
  --tag-operation-bg-color-get: #e5faef; // @presenter Color
  
  --tag-operation-color-post: #1e65f5; // @presenter Color
  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
  
  --tag-operation-color-put: #f5901d; // @presenter Color
  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
  
  --tag-operation-color-patch: #f5c31d; // @presenter Color
  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color

  --tag-operation-color-head: #5b4ccc; // @presenter Color
  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color

  --tag-operation-color-options: #1a1c21; // @presenter Color
  --tag-operation-bg-color-options: #ededf2; // @presenter Color
  
  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color

  --tag-action-color-receive: #4db144; // @presenter Color
  --tag-action-color-sub: #4db144; // @presenter Color
  --tag-action-color-cons: #4db144; // @presenter Color

  --tag-action-color-send: #4144f6; // @presenter Color
  --tag-action-color-pub: #4144f6; // @presenter Color
  --tag-action-color-publish: #4144f6; // @presenter Color

  --tag-action-color-channel: #F0870E; // @presenter Color
  --tag-action-color-topic: #F0870E; // @presenter Color
  --tag-action-color-queue: #D72E81; // @presenter Color
  --tag-action-color-exchange: #9B51E0; // @presenter Color

  .tag-delete {
      --tag-color: var(--tag-operation-color-delete); // @presenter Color
  }

  .tag-get {
      --tag-color: var(--tag-operation-color-get); // @presenter Color
  }

  .tag-post {
      --tag-color: var(--tag-operation-color-post); // @presenter Color
  }

  .tag-put {
      --tag-color: var(--tag-operation-color-put); // @presenter Color
  }
  
  .tag-patch {
      --tag-color: var(--tag-operation-color-patch); // @presenter Color
  }

  .tag-http-deprecated {
      --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
  }
  
  .tag-receive {
      --tag-color: var(--tag-action-color-receive); // @presenter Color
  }

  .tag-send {
      --tag-color: var(--tag-action-color-send); // @presenter Color
  }

  .tag-pub {
      --tag-color: var(--tag-action-color-pub); // @presenter Color
  }

  .tag-sub {
      --tag-color: var(--tag-action-color-sub); // @presenter Color
  }

  .tag-cons {
      --tag-color: var(--tag-action-color-cons); // @presenter Color
  }

  .tag-publish {
      --tag-color: var(--tag-action-color-publish); // @presenter Color
  }

  .tag-channel {
      --tag-color: var(--tag-action-color-channel); // @presenter Color
  }

  .tag-topic {
      --tag-color: var(--tag-action-color-channel); // @presenter Color
  }

  .tag-queue {
      --tag-color: var(--tag-action-color-queue); // @presenter Color
  }

  .tag-exchange {
      --tag-color: var(--tag-action-color-exchange); // @presenter Color
  }
      
  // shorten alias for exchange tag:
  .tag-exch {
      --tag-color: var(--tag-action-color-exchange); // @presenter Color
  }
      
  // @tokens End
`;