@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/size';

.demo-favicon-tabs {
  background: color.$base-gray-dark;
  color: color.$text-light;
  cursor: default;
  display: flex;
  font-size: 13px;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding: 4px;
  padding-block-end: 0;
  user-select: none;
  white-space: nowrap;

  li {
    align-items: center;
    block-size: 36px;
    border-top-left-radius: size.$border-radius-medium;
    border-top-right-radius: size.$border-radius-medium;
    display: flex;
    flex: 1;
    max-inline-size: 220px;
    padding: 0 12px;
  }

  li:last-child {
    background-color: color.$base-white;
    color: color.$text-dark;
  }

  li:last-child::after {
    content: '×';
    font-size: 24px;
    margin-inline-start: auto;
  }

  svg {
    block-size: 16px;
    flex: none;
    inline-size: 16px;
    margin-inline-end: 8px;
  }
}