.switches-container {
  .switches {
    width: 100%;
    position: relative;

    .no-content {
      padding: 1em;
    }

    .switch-info {
      margin: -1em;
      padding: 0;

      @media screen and (max-width: calc(#{$tablet} - 1px)) {
        min-width: calc(100vw - 3em);
      }

      @media screen and (min-width: $tablet) {
        min-width: 45em;
      }
    }

    .row {
      width: 100%;
      display: flex;
      padding: .5em 1em;

      &:nth-child(odd) {
        background: $background-color;
      }

      &:nth-child(even) {
        background: $default-bg-3;
      }

      &:hover {
        background: $hover-bg;
      }

      .name {
        font-weight: bold;
      }

      @media screen and (max-width: calc(#{$tablet} - 1px)) {
        flex-wrap: wrap;

        .name,
        .value {
          width: 100%;
        }
      }

      @media screen and (min-width: $tablet) {
        .name,
        .value {
          width: 50%;
        }

        .value {
          text-align: right;
        }
      }
    }
  }
}