@import "../dependencies/variables-epic.less";
@import "../dependencies/color-class.less";

/* Radio Tabs */
.radio-tabs{
  .checkable-element {
    .checkable-item {
      border: 1px solid @light-gray;
      cursor: pointer;
      float: left;
      padding: 1rem 3rem;
      text-transform: uppercase;
      font-weight: normal;
      &.active {
          background: @tertiary-color;
          border-color: @tertiary-color;
          color: @white;
      }
    }

    .tab-label {
      float: left;
      &:first-of-type {
          .checkable-item {
              border-radius: 5px 0 0 5px;
          }
      }

      &:last-of-type {
        .checkable-item {
            border-radius: 0 5px 5px 0;
        }
      }

      > input{ /* HIDE RADIO */
        visibility: hidden; /* Makes input not-clickable */
        position: absolute; /* Remove input from document flow */
      }

      > input + .selected-element{ /* IMAGE STYLES */
        cursor: pointer;
        border: 2px solid @light-gray;

        img{
          border-bottom: 1px solid @light-gray;
        }
      }

      > input:checked + .selected-element{ /* (RADIO CHECKED) IMAGE STYLES */
        border: 2px solid;
        border-color: @tertiary-color;
      }
    }


    &.radio-pills{
      .tab-label > input:checked + .checkable-item{ /* (RADIO CHECKED) IMAGE STYLES */
        background: @tertiary-color;
        color: @white;
      }
    }

    .settings-label {
        display: inline-block;
        padding: 1rem;
    }

    &.colors {
        .tab-label > input:checked + .checkable-item {
            box-shadow: 0px 0px 15px 0px @black;
            border: 0;
        }

        .checkable-item {
            // font-family: @open-sans;
            font-weight: 500;
            font-size: 1.4rem;
            &.rounded {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                padding: 2rem;
                margin-right: 1rem;
            }
        }
    }
  }
}

/* Color Example */
.bg-red{
    background: crimson !important;
}

.bg-green{
    background: teal !important;
}

.bg-yellow{
    background: wheat !important;
}