@import 'styles/variables.scss';

.container {
  color: var(--primaryText);

  section {
    margin-bottom: 0;

    &.enable {
      &.active {
        div {
          color: var(--lightningOrange);
          border-color: var(--lightningOrange);
        }
      }

      div:hover {
        color: var(--lightningOrange);
        border-color: var(--lightningOrange);
      }
    }

    &.disable {
      &.active {
        div {
          color: var(--lightningOrange);
          border-color: var(--lightningOrange);
        }
      }

      div:hover {
        color: var(--lightningOrange);
        border-color: var(--lightningOrange);
      }
    }

    div {
      width: 30%;
      text-align: center;
      display: flex;
      padding: 20px;
      border: 1px solid var(--primaryText);
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.25s;
      margin: 15px 20px 10px 0;
    }

    .label {
      margin-left: 15px;
    }
  }
}