/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */

@tailwind preflight;

/**
    * Here you would add any of your custom component classes; stuff that you'd
    * want loaded *before* the utilities so that the utilities could still
    * override them.
    *
    * Example:
    *
    * .btn { ... }
    * .form-input { ... }
    *
    * Or if using a preprocessor:
    *
    * @import "components/buttons";
    * @import "components/forms";
    */


/**
    * This injects all of Tailwind's utility classes, generated based on your
    * config file.
    */

@tailwind utilities;

/**
    * Here you would add any custom utilities you need that don't come out of the
    * box with Tailwind.
    *
    * Example :
    *
    * .bg-pattern-graph-paper { ... }
    * .skew-45 { ... }
    *
    * Or if using a preprocessor..
    *
    * @import "utilities/backgrond-patterns";
    * @import "utilities/skew-transforms";
    */

.btn {
    @apply .font-bold .py-2 .px-4 .rounded;
}

.btn-blue {
    @apply .bg-blue .text-white;
}

.btn-blue:hover {
    @apply .bg-blue-dark;
}

.input-control {
    @apply .shadow .appearance-none .border .rounded .w-full .py-2 .px-3 .text-grey-darker;
}

.vb>.vb-dragger {
    z-index: 5;
    width: 12px;
    right: 0;
}

.vb>.vb-dragger>.vb-dragger-styler {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotate3d(0, 0, 0, 0);
    transform: rotate3d(0, 0, 0, 0);
    -webkit-transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
    transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
    background-color: rgba(48, 121, 244, .1);
    margin: 5px 5px 5px 0;
    border-radius: 20px;
    height: calc(100% - 10px);
    display: block;
}

.vb.vb-scrolling-phantom>.vb-dragger>.vb-dragger-styler {
    background-color: rgba(48, 121, 244, .3);
}

.vb>.vb-dragger:hover>.vb-dragger-styler {
    background-color: rgba(48, 121, 244, .5);
    margin: 0px;
    height: 100%;
}

.vb.vb-dragging>.vb-dragger>.vb-dragger-styler {
    background-color: rgba(48, 121, 244, .5);
    margin: 0px;
    height: 100%;
}

.vb.vb-dragging-phantom>.vb-dragger>.vb-dragger-styler {
    background-color: rgba(48, 121, 244, .5);
}
