.state {
  @apply inline-block px-4 py-1 font-normal bg-gray-200 rounded;
  &.is-primary { 
    @apply bg-primary-700 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-primary-700;
    }
  }
  &.is-secondary {
    @apply bg-secondary-700 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-secondary-700;
    }
  }
  &.is-tertiary {
    @apply bg-tertiary-700 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-tertiary-700;
    }
  }
  &.is-danger {
    @apply bg-red-500 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-red-600;
    }
  }
  &.is-warning {
    @apply bg-yellow-400 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-yellow-600;
    }
  }
  &.is-success {
    @apply bg-green-500 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-green-600;
    }
  }
  &.is-info {
    @apply bg-sky-500 text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-sky-600;
    }
  }
  
  &.is-white {
    @apply bg-white text-gray-700;
    &.semi-transparent {
      @apply bg-opacity-20;
    }
  }

  &.is-gray {
    @apply bg-gray-300 text-gray-700;
    &.semi-transparent {
      @apply bg-opacity-20;
    }
  }

  &.is-dark {
    @apply bg-black text-white;
    &.semi-transparent {
      @apply bg-opacity-20 text-gray-700;
    }
  }

  &.is-outlined { @apply bg-transparent text-gray-600 border-2 border-gray-600; }
  &.is-primary-outline { @apply text-primary-700 border-2 border-primary-700 bg-transparent; }
  &.is-secondary-outline { @apply text-secondary-700 border-2 border-secondary-700 bg-transparent; }
  &.is-tertiary-outline { @apply text-tertiary-700 border-2 border-tertiary-700 bg-transparent; }
  &.is-danger-outline { @apply text-red-500 border-2 border-red-500 bg-transparent; }
  &.is-warning-outline { @apply text-yellow-400 border-2 border-yellow-400 bg-transparent; }
  &.is-success-outline { @apply text-green-500 border-2 border-green-500 bg-transparent; }
  &.is-info-outline { @apply text-sky-500 border-2 border-sky-500 bg-transparent; }
  &.is-white-outline { @apply text-white border-2 border-white bg-transparent; }
  &.is-gray-outline { @apply text-gray-400 border-2 border-gray-400 bg-transparent; }
  &.is-dark-outline { @apply text-black border-2 border-black bg-transparent; }

  &.has-icon {
    @apply inline-flex flex-wrap items-center;
    span { @apply flex items-center; }
  }

  .icon { @apply ml-1 w-5 h-5; }

  &.is-flat {
    @apply rounded-none;
  }
  &.is-circle {
    @apply rounded-full;
  }

  &.is-small {
    @apply text-sm  px-2;
  }

  &.is-large {
    @apply text-lg  px-6 py-2;
  }
}