@use "theme";

.container {
  background-color: theme.$header-color;
  min-height: 10px;
  padding: 10px 20px;
  box-sizing: border-box;

  .category-navigation {
    width: 100%;
    height: 30px;
    display: flex;
    margin-bottom: 15px;

    button {
      width: 100%;
      margin-right: 5px;
      border-radius: 5px;
      text-decoration: none;
      display: flex;

      span {
        margin: auto;
        color: white;
      }
    }

    button:not(.active) {
      background-color: #4c515e;
    }

    button:hover,
    button:focus {
      filter: brightness(50%);
    }

    button:active {
      // display: none;
    }
  }

  .setting-row {
    display: flex;
    flex-direction: row;
    min-height: 30px;
    padding: 5px;
    box-sizing: border-box;

    .setting-title {
      font-size: 18px;
      margin: auto auto auto 0;
    }

    .setting-toggleable {
      min-width: 150px;
      display: flex;
      margin: auto 0 auto auto;

      .spinner {
        margin: auto 0 auto auto;
        animation: spin 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }

      input {
        padding: 0;
        margin: auto 0 auto auto;
        height: 25px;
        width: 100px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 10px;
      }

      input[type="text"] {
        width: 350px;
      }

      button {
        width: 125px;
        margin-left: auto;
        height: 30px;
      }
    }
  }
  .setting-row:nth-child(even) {
    background-color: #1c1c1c;
  }
  .setting-row:nth-child(odd) {
    background-color: #191919;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}