.creator{
    height: 35px;
    transition: height 0.3s;
    overflow-y: hidden;
    background-color: $color-grey;
    color: $color-white;

    margin-bottom: 50px;


    input {
        background-color: $color-grey-dark;
        border: 0;
        padding: rem(4);
    }

    &.active {
        height: 280px;
    }

    label {
        width: 100%;
        display: block;
    }

    button {

        background-color: $color-primary-1;
        border:0;
        color:$color-white;
        font-size: rem(12);
        padding:rem(0) rem(10);
        height: $toolbar-height;
        transition: all 0.2s ease-in-out;
        width: 100%;

        margin: 0 0 rem(20) 0;

        &.disabled {
            pointer-events: none;
            background-color: $color-grey-lighter;
        }

        &:hover {
            background-color: $color-grey-lighter;
        }
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance:none;
        border:0;
        border-bottom:1px solid $color-grey-light;
        border-left:1px solid $color-grey-light;
        background: url(../img/dropdown.svg) no-repeat right $color-grey-dark;
        background-position: 90% 50%;
        background-size: rem(10) auto;
        padding-right: rem(15);
        padding-left: rem(5);
        margin-right: rem(30);
        color:$color-grey-lightest;
        height: $toolbar-height;
        border-radius: 0px;
        width: 90%;
    }


    .creator-input {
        padding: rem(20);
    }
}
