:root{
  --color-btn-text: #464040;
  --color-suite-primary: #d1a33c;
  --back-btn-selected: #c7c7c766;
  --color-btn-back-hover: #A6A6A6;
  --color-background-tab: #E9E9E9;

  &[data-theme="dark"] {
    --color-btn-text: #FFFFFF;
    --color-btn-back-hover: #d8d8d866;
    --color-background-tab: #282828;
  }
}



.btn-list{
  height: 100%;
  display: flex;
  gap: 11px;

  .btn-list__btn{
    width: fit-content;
    height: 35px;
    min-width: 150px;
    padding: 5px;
    border-radius: var(--border-radius-S360);
    border: 1px solid transparent;
    background-color: var(--color-background-tab);
    color: var(--color-btn-text);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
    gap: 5px;

    .btn-list__btn__title{
      white-space: nowrap;
    }

    &.btn-list__btn--selected{
      background-color: var(--back-btn-selected) !important;
      border-bottom: 1px solid var(--color-selected);
      border-radius: 4px 4px 0px 0px;
    }

    .btn-list__icon{
      font-size: var(--font-size-extra-large-S360);
    }

    /**? Styles to change the focus outline. ***/
    &:focus{
      outline: 2px solid var(--suite-primary-S360);
      outline-offset: 0;
    }

    &:hover {
      background-color: var(--color-btn-back-hover) !important;
    }
  }
}