// stylelint-disable scss/at-mixin-pattern
@import '~terra-mixins/lib/Mixins';

// import themes
@import './clinical-lowlight-theme/examplesetup';

:local {
  @mixin align-example-common() {
    background-color: #000;
    display: block;
    height: 20px;
    width: 40px;
  }

  .outlined-placeholder {
    border: 2px solid #0079be;
    display: block;

    a:focus {
      outline: 2px dotted #000;
    }
  }

  .placeholder {
    @include align-example-common();
  }

  .highlighted-placeholder {
    @include align-example-common();
    background-color: #0079be;
  }

  .space-around {
    display: flex;
    margin: 5px;

    &:focus {
      outline: 2px dotted #000;
    }
  }

  .radio-buttons {

    // stylelint-disable selector-no-qualifying-type
    input[type='radio']:focus {
      outline: 2px dotted #000;
    }

    // stylelint-enable selector-no-qualifying-type

    .label {
      margin-left: 5px;

      &:first-child {
        margin-right: 20px;
      }
    }
  }

  .arrange-button {
    background: none;
    border: 0;

    &:hover {
      background: none;
      border: 0;
    }
  }

  .header-icon {
    background-repeat: no-repeat;
    background-size: auto;
    display: inline-block;

    &.menu {
      background-image: var(--terra-core-docs-arrange-menu-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>'));
    }

    &.home {
      background-image: var(--terra-core-docs-arrange-home-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9"/><path d="M9 22V12h6v10M2 10.6L12 2l10 8.6"/></svg>'));
    }

    &.chat {
      background-image: var(--terra-core-docs-arrange-chat-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>'));
    }

    &.settings {
      background-image: var(--terra-core-docs-arrange-settings-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>'));
    }

    &.backtotop {
      background-image: var(--terra-core-docs-arrange-backtotop-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V6M5 12l7-7 7 7"/></svg>'));
    }

    &.twitter {
      background-image: var(--terra-core-docs-arrange-twitter-background-image, inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>'));
    }
  }
}